<template>
  <div class="shoplist">
    <div class="shopping">
      <div class="info" v-for="(tag,index) in tags" :key="index" @click="detail(tag.id)">
        <img :src="tag.logo" alt="">
        <div class="info-main">
          <div class="info-title">
            <span class="title">{{tag.name}}</span>
          </div>
          <div class="reputation">
            <div class="sales">
              <rate :score="tag.rating"></rate><span class="score">{{tag.rating}}</span> <span class="num">月售{{tag.orderNo}}单</span>
            </div>
            <div class="delivery">
              <span>￥{{tag.sendFee}}起送</span>|<span>配送费￥{{tag.avgFee}}</span>|<span>￥{{tag.deliveryFee}}/人</span>
            </div>
          </div>
        </div>
        <div class="discounts">
          <div class="full-reduction">
            <div class="reduction" v-for="(ta,index) in tag.discount" :key="index">
              <i :class="['icon-take','icon-'+ta.icon]"></i> <span class="content">{{ta.content}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Rate from 'base/rate/rate'
import {mapActions} from 'vuex'
export default {
  name: 'SellerList',
  components: {
    Rate
  },
  created () {
    this.$http.get('static/json/seller.json').then(response => {
      this.tags = response.data
    })
  },
  data () {
    return {
      tags: []
    }
  },
  methods: {
    ...mapActions([
      'setSeller'
    ]),
    detail (id) {
      let list = this.tags
      for (let i = 0; i < list.length; i++) {
        if (list[i].id === id) {
          this.setSeller(list[i])
          document.title = list[i].name
          this.$router.push('/seller')
          break
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .shoplist {
    width: 100%;
    backface-visibility: #fff;
    .shopping {
      position: relative;
      margin: .133333rem /* 10/75 */ 0;
      padding: 0 .2rem /* 15/75 */;
      img {
        height: 1.733333rem /* 130/75 */;
        width: 1.733333rem /* 130/75 */;
      }
      .info-main {
        float: right;
        width: 7.733333rem /* 580/75 */;
        .title {
          font-size: .4rem /* 24/75 */;
          color: #000;
        }
        .bao {
          float: right;
        }
        .reputation{
          border-bottom: solid rgb(250, 247, 247) .013333rem /* 1/75 */ ;
          margin-bottom: .133333rem /* 10/75 */;
        }
        .reputation div {
          margin-top: .133333rem /* 10/75 */;
          .sales {
            position: relative;
            .num {
              margin-left: .266667rem /* 20/75 */;
            }
            rate {
              position: absolute;
              bottom: 0;
            }
          }
        }
      }
      .reduction{
        padding-left: 1.866667rem /* 140/75 */;
        margin: .133333rem /* 10/75 */ 0;
        position: relative;
        .content {
          padding-left: .066667rem /* 5/75 */;
        }
        i {
          font-size: .16rem /* 12/75 */;
        }
      }
    }
  }
  .info {
    margin: .266667rem /* 20/75 */ 0;
    padding: .133333rem /* 10/75 */ 0;
    border-bottom: .013333rem /* 1/75 */ #eee solid;
  }
</style>
